<template>
	<view class="warp">
	<!-- 	<view class="header nav-header" :style="{paddingTop:top+'px'}">
			<view  class="tui-flex tui-flex-start" style="padding:0 20upx 20upx 20upx;">
				<image class="logo" src="../../static/logo.png"  mode="heightFix"></image>
				<text v-if="user">{{user.branch}}</text>
			</view>
		</view> -->
		<view class="home-nav tui-flex-box" :style="{backgroundImage:'url('+tui.website+'static/home/img/topbg4.png)',marginTop:(35+top)+'px',marginLeft:'10px',marginRight:'10px',backgroundSize:'100% 120%',borderRadius:'10px'}">
			<image src="../../static/logo3.png" mode="widthFix" style="width: 150rpx;margin-left: 50rpx;margin-top: 20rpx;"></image>
			<view style="position: absolute;top: 50rpx;left: 210rpx;color: #FFFFFF;font-size: 30rpx;" v-if="user">
				{{user.branch}}
			</view>
			<view class="tui-flex home-menu">
				
				<view class="tui-col-4" @click="openPage('/pages/order/order')" >
					<image class="ico" src="../../static/images/icon/neworder.png" mode="widthFix"></image>
					<text>开单</text>
				</view>
				<view class="tui-col-4" @click="openPage('/pages/card/order')" >
					<image class="ico" src="../../static/images/icon/card.png" mode="widthFix"></image>
					<text>开卡</text>
				</view>
				<view class="tui-col-4" @click="openPage('../customer/adduser')">
					<image class="ico" src="../../static/images/icon/adduser3.png" mode="widthFix"></image>
					<text>新增会员</text>
				</view>
			</view>
			
		</view>
		
		<view class="mycard sys_notice">
			<tui-list-cell  :arrow="true" arrowColor="danger" :unlined="true" :size="32">
				<view class="tui-item-box" >
					<image src="../../static/laba.png" @click="openMsg" class="sys_notice_ico" mode="widthFix"></image>
					<swiper vertical autoplay circular interval="3000" class="tui-swiper tui-list-cell_name">
						<swiper-item v-for="(item,index) in newsList" :key="index" class="tui-swiper-item">
							<view class="tui-news-item" @tap='detail(item.id)'>{{item.title}}</view>
						</swiper-item>
					</swiper>
				</view>
			</tui-list-cell>
		</view>
		
		
		<view class="mycard server">
			<view class="h1">常用服务</view>
			<view class="tui-flex server_lis">
				<view class="tui-col-4" @click="openPage('/pages/myOrder/myOrder')">
					<image class="ico" style="width: 70rpx;height: 70rpx;" src="../../static/images/icon/order1.png" mode=""></image>
					<text>订单记录</text>
				</view>
				<view class="tui-col-4" @click="openPage('/pages/customer/actions')">
					<image class="ico" style="width: 70rpx;height: 70rpx" src="../../static/images/icon/user2-lei.png" mode=""></image>
					<text>客户动态</text>
				</view>
				<view class="tui-col-4" @click="openPage('/pages/my/share')">
					<image class="ico" style="width: 70rpx;height: 70rpx" src="../../static/images/icon/qr-lei.png" mode=""></image>
					<text>二维码</text>
				</view>
			</view>
		</view>
		<view class="mycard datainfo">
			<view class="h1">经营数据 <tui-icon name="eye" color="#c5c5c5" :size="20" margin="0 10px"></tui-icon>
			<view class="datainfo_tab">
				<view :class="tab_idx == 0?'act':''" @click="getTotalData(0)" >今日</view>
				<view :class="tab_idx == 1?'act':''" @click="getTotalData(1)" >昨天</view>
				<view :class="tab_idx == 4?'act':''" @click="getTotalData(4)" >本月</view>
			</view>
			</view>
			<view class="datainfo_lis">
				<view class="tui-flex">
					<view class="tui-col-6 " >
						<view class="num">{{total.card_num}}</view>
						<image class="ico" src="/static/images/icon/p.png" mode="widthFix"></image>
						<text>开卡人数</text>
					</view>
					<view class="tui-col-6">
						<view class="num">{{total.fee_shou}}</view>
						<image class="ico" src="/static/images/icon/money2.png" mode="widthFix"></image>
						<!-- <text>充值总额</text> -->
						<text>收款总额</text>
					</view>
				</view>
				<view class="tui-flex">
					<view class="tui-col-6 " style="margin-top: 35px;">
						<view class="num">{{total.order_num}}</view>
						<image class="ico" src="/static/images/icon/p.png" mode="widthFix"></image>
						<text>开单人数</text>
					</view>
					<view class="tui-col-6" style="margin-top: 35px;">
						<view class="num">{{total.money_xh}}</view>
						<image class="ico" src="/static/images/icon/clock.png" mode="widthFix"></image>
						<!-- <text>开单总额</text> -->
						<text>消耗总额</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				title: 'Hello',
				top:0,
				tab_idx:0,
				total:{},
				user:null,
				newsList: [],
				
			}
		},
		onLoad() {
			let obj = {};
			// #ifdef MP-WEIXIN
			obj = wx.getMenuButtonBoundingClientRect();
			// #endif
			// #ifdef MP-BAIDU
			obj = swan.getMenuButtonBoundingClientRect();
			// #endif
			// #ifdef MP-ALIPAY
			my.hideAddToDesktopMenu();
			// #endif
			uni.getSystemInfo({
				success: (res) => {
					this.width = obj.left || res.windowWidth;
					this.height = obj.top ? (obj.top + obj.height + 8) : (res.statusBarHeight + 44);
					this.top = obj.top ? (obj.top + (obj.height - 32) / 2) : (res.statusBarHeight + 6);
					// this.scrollH = res.windowWidth * 0.6
				}
			})
		},
		onShow() {
			// this.tui.chkAuth();
			this.getTotalData(0);
			this.getNews();
			this.getUser();
		},
		methods: {
			openPage(uri){
				uni.navigateTo({
					url:uri
				})
			},openTabPage(uri){
				uni.reLaunch({
					url:uri
				})
			},
			getTotalData(i){
				this.tab_idx=i
				this.tui.get('user/api/getTotal',{type:i}).then(res=>{
					this.total = res.data;
				});
			},
			getNews(){
				this.tui.get('cms/index/newslist',{cid:1}).then(res=>{
					this.newsList = res.data.data;
				});
			},
			getUser(){
				this.tui.get('user/api/getuser').then(res=>{
					this.user = res.data;
				});
			},
			detail(id){
				uni.navigateTo({
					url:"../doc/detail?id="+id
				})
			},
			openMsg(){
				uni.navigateTo({
					url:"../doc/doc"
				})
			}
		}
	}
</script>
	
<style>
	@import '/static/style/thorui.css';

	.warp{background-color: #f6f6f6;}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.header{background-color: #FFF;}
	.logo{
		height: 50upx;
		width: 50upx;
	}
	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	.home-nav{
		background-repeat: no-repeat;
		background-size: 100% 90%;
		position: relative;
	}
	.home-menu{
		padding: 30upx 0 40upx 0;
		color: #FFF;
	}
	.tui-col-4{text-align: center;}
	.tui-col-4 .ico{ width: 60upx;height: 60upx;text-align: center;}
	.tui-col-4 .ico+text{ width: 100%;display: block;text-align: center;font-size: 28rpx;}
	.home-nav text{
		font-size: 32upx;
	}
	.tui-item-box {
		width: 100%;
		display: flex;
		align-items: center;
	}
	.tui-list-cell_name{font-size: 32upx;}
	.sys_notice{
		padding: 0;
	}.sys_notice>view{
		border-radius: 30upx;
	}
	.tui-item-box .sys_notice_ico{
		height: 40rpx;
		width: 40rpx;
		flex-shrink: 0;
		margin-right: 15px;
		padding: 0;
	}
	
	.mycard .h1{
		padding: 12px 20px;
		font-size: 36upx;
		font-weight: 700;
		color: #383838;
		margin-bottom: 10px;
	}
	.mycard .server_lis{
		
	}
	.mycard .server_lis text{
		font-size: 14px;
		color: #707070;
		padding: 8px 0;
	}
	.datainfo_tab{display: block;float: right;}
	.datainfo_tab>view{position: relative; display: inline-block;font-size: 30upx;font-weight: 700;color: #5e5e5e; margin-left: 30px;}
	.datainfo_tab>view.act{color: #000000;}
	.datainfo_tab>view.act:after{
		content: '';
		position: absolute;
		background: #ff0000;
		width: 23px;
		height: 3px;
		bottom: -10px;
		right: 2px;
	}
	.datainfo_lis{
		background: #f9f9f9;
		margin: 15px;
		padding: 15px 0;
	}
	.datainfo_lis .tui-col-6{
		text-align: center;
		color: #707070;
	}
	.datainfo_lis .tui-col-6 .num{
		display: block;
		width: 100%;
		text-align: center;
		font-size: 18px;
		font-weight: 700;
		margin-bottom: 10px;
		color: #383838;
	}
	.datainfo_lis .ico{
		width: 18px;
		height: 18px;
		vertical-align: bottom;
		margin-right: 10px;
	}
	.tui-swiper {
		font-size: 28rpx;
		height: 50rpx;
		width: 520upx;
	}
	
	.tui-swiper-item {
		display: flex;
		align-items: center
	}
	
	.tui-news-item {
		line-height: 28rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.datainfo_lis .tui-flex .tui-col-6 text{
		font-size: 28rpx;
	}
</style>
